<template>
  <el-button
    class="kButton"
    :disabled="disabled"
  >
    {{ value }}
  </el-button>
</template>

<script>
/**
  *value            :    Button文字
  *type             :    Button类型 1:big 2:small
  *loading          :    false ? true (是否带loading)
  *disabled         :    false ? true (是否可选)
  *icon   Example   :    icon="el-icon-search"(搜索的icon) 其他见https://element.eleme.cn/2.2/#/zh-CN/component/button
  *autofocus        :    false ? true (是否默认聚集)
  *使用 ： <My-button value='恩牛' />
 */
export default {
  name: 'KButton',
  props: {
    value: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: [Number, String],
      default() {
        return 1
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped >
$mainColor:#3b425d;// 主色调
$disabledColor: #909399; //禁用色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
.el-button{
  font-size: 14px;
  color: #ffffff;
  background-color: $mainColor;
  &:hover,&:focus{
    background-color: $hoverColor;
  }
  &:active {
    color: #ffffff;
    border-color: transparent;
  }
}
::v-deep.el-button.is-disabled, ::v-deep.el-button.is-disabled:focus, ::v-deep.el-button.is-disabled:hover{
        color: #C0C4CC !important;
        cursor: not-allowed;
        background-image: none;
        background-color: #FFF !important;
        border-color: #EBEEF5 !important;
   }
  
</style>
